<template>
  <el-row class="home" :gutter="20">
    <el-col :span="7" class="user-col">
      <el-card shadow="hover" class="user-card">
        <div class="user">
          <div><img src="../../assets/images/4.jpeg" alt="" /></div>
          <div class="userinfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <hr />
        <div class="login-info">
          <p>上次登录时间：<span>2022-9-24</span></p>
          <p>上次登录地点：<span>武汉</span></p>
        </div>
      </el-card>
      <el-card class="table-card" style="margin-top: 20px; height: 360px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="品牌" width="105" />
          <el-table-column prop="todayBuy" label="今日购买" width="120" />
          <el-table-column prop="monthBuy" label="本月购买" width="120" />
          <el-table-column prop="totalBuy" label="总购买" width="120" />
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="17" class="count-col">
      <el-card
        v-for="(item, index) in countData"
        :body-style="{ display: 'flex', padding: 0 }"
      >
        <svg aria-hidden="true">
          <use :xlink:href="item.icon"></use>
        </svg>
        <div>
          <p>{{ item.value }}</p>
          <p>{{ item.name }}</p>
        </div>
      </el-card>
      <el-card class="polyline">
        <div id="lchart" style="width: 1100px; height: 250px"></div>
      </el-card>
      <el-card class="histogram">
        <div id="hchart" style="width: 540px; height: 300px"></div>
      </el-card>
      <el-card class="piechart">
        <div id="pchart" style="width: 540px; height: 300px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup>
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
import * as echarts from 'echarts'
import { useStore } from 'vuex'
//获取proxy
const { proxy } = getCurrentInstance()
const store2 = useStore()
let tableData = [
  {
    name: 'oppo',
    todayBuy: 50,
    monthBuy: 1500,
    totalBuy: 22000
  },
  {
    name: 'huawei',
    todayBuy: 60,
    monthBuy: 5000,
    totalBuy: 36000
  },
  {
    name: 'apple',
    todayBuy: 80,
    monthBuy: 3000,
    totalBuy: 45000
  },
  {
    name: 'samsung',
    todayBuy: 70,
    monthBuy: 1000,
    totalBuy: 20000
  },
  {
    name: 'vivo',
    todayBuy: 72,
    monthBuy: 2000,
    totalBuy: 30000
  },
  {
    name: 'xiaomi',
    todayBuy: 60,
    monthBuy: 2000,
    totalBuy: 35000
  },
  {
    name: 'oneplus',
    todayBuy: 65,
    monthBuy: 2000,
    totalBuy: 28000
  }
]
//支付，收藏等数据
let countData = [
  {
    name: '今日支付订单',
    value: 1234,
    icon: '#icon-icon--yes'
  },
  {
    name: '今日收藏订单',
    value: 234,
    icon: '#icon-xingxing'
  },
  {
    name: '今日未支付订单',
    value: 12,
    icon: '#icon-gouwu'
  },

  {
    name: '本月支付订单',
    value: 64531,
    icon: '#icon-icon--yes'
  },
  {
    name: '本月收藏订单',
    value: 3241,
    icon: '#icon-xingxing'
  },
  {
    name: '本月未支付订单',
    value: 324,
    icon: '#icon-gouwu'
  }
]
//echarts数据
let option = {
  //折线图数据
  polyline: {
    grid: {
      left: '2%',
      right: '4%',
      bottom: '3%',
      top: '4%',
      containLabel: true
    },
    legend: {
      data: ['oppe', 'huawei', 'apple', 'samsung', 'vivo', 'xioami', 'oneplus']
    },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'oppe',
        type: 'line',
        data: [1500, 2300, 3400, 4500, 3400, 3200, 2350]
      },
      {
        name: 'huawei',
        type: 'line',
        data: [5000, 3000, 4000, 6000, 8000, 5500, 4500]
      },
      {
        name: 'apple',
        type: 'line',
        data: [3000, 4000, 9000, 6000, 8000, 7000, 9000]
      },
      {
        name: 'samsung',
        type: 'line',
        data: [1000, 6000, 7000, 4500, 5000, 4000, 6000]
      },
      {
        name: 'vivo',
        type: 'line',
        data: [2000, 6000, 5000, 4500, 5000, 6000, 5000]
      },
      {
        name: 'xioami',
        type: 'line',
        data: [1000, 6000, 7000, 2000, 5000, 6000, 6000]
      },
      {
        name: 'oneplus',
        type: 'line',
        data: [3000, 5000, 7000, 4500, 3000, 4000, 4500]
      }
    ]
  },
  //柱状图数据
  histogram: {
    grid: {
      left: '6%',
      top: '2%'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [230, 260, 350, 180, 250, 370, 160],
        type: 'bar'
      }
    ]
  },
  //饼状图数据
  piechart: {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '2%',
      left: '2%'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 22000, name: 'oppo' },
          { value: 36000, name: 'huawei' },
          { value: 45000, name: 'apple' },
          { value: 20000, name: 'sumsung' },
          { value: 30000, name: 'vivo' },
          { value: 35000, name: 'xioami' },
          { value: 28000, name: 'oneplus' }
        ]
      }
    ]
  }
}
let width = ref()
const changeWidth = () => {
  width.value = store2.state.isCollapse ? '300px' : '400px'
  console.log(width)
}
//获取首页table数据
const getTableList = async () => {
  tableData = await proxy.$api.getTableData()
  console.log('tableData', tableData)
}
//获取首页count数据
const getCountData = async () => {
  console.log(proxy)
  countData = await proxy.$api.getCountData()
  console.log('countData:', countData)
}
//获取首页echarts数据
const getEchartsData = async () => {
  option = await proxy.$api.getCountData()
  console.log('option:', option)
}
//基于准备好的dom，初始化echarts实例
const initChart = () => {
  let myLineChart = echarts.init(document.getElementById('lchart'))
  let myGramChart = echarts.init(document.getElementById('hchart'))
  let myPieChart = echarts.init(document.getElementById('pchart'))
  // 使用刚指定的配置项和数据显示图表
  myLineChart.setOption(option.polyline)
  myGramChart.setOption(option.histogram)
  myPieChart.setOption(option.piechart)
}
onMounted(() => {
  getTableList()
  getCountData()
  getEchartsData()
  initChart()
  changeWidth()
  console.log(store2)
})
</script>
<style lang="less" scoped>
.user-col {
  .user-card {
    display: flex;
    flex-direction: column;
    .user {
      display: flex;
      position: relative;
      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
      .userinfo {
        position: absolute;
        left: 200px;
        top: 25px;
        line-height: 6px;
        .name {
          font-size: 28px;
        }
        .access {
          color: rgba(166, 161, 161, 0.82);
        }
      }
    }
  }
}
.count-col {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  .el-card {
    width: 370px;
    height: 80px;
    margin-left: 18px;
    margin-bottom: 20px;
    align-items: center;
    svg {
      width: 80px;
      height: 80px;
      background-color: rgba(140, 205, 225, 0.3);
    }
    div {
      margin-left: 20px;
      line-height: 10px;
      :first-child {
        font-size: 24px;
      }
      :last-child {
        font-size: 18px;
        color: rgb(107, 105, 105);
      }
    }
  }
  .polyline {
    width: 1150px;
    height: 270px;
  }
  .histogram {
    width: 555px;
    height: 300px;
  }
  .piechart {
    width: 555px;
    height: 300px;
    margin-left: 40px;
  }
}
</style>
